<template>
  <div>
    <div class="pageTop" style="margin-top:15px;">
      <el-row :gutter="20"  :style="{width:100+'%',margin:0}">
        <el-col :span="16" :style="{paddingLeft:0}">
          <div class="left">
            <div class="financeInfo">
              <el-row :gutter="10">
                <el-col :span="12">
                  <div class="balance">
                    <div>所有用户余额 {{paramsData.totalMoney/100}}元</div>
                    <div style="margin-top:4px;margin-bottom:6px;">
                      <el-button size="mini" @click="goEmbody">去提现</el-button>
                    </div>
                    <div>每月10号可申请提现上月奖金一次</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="bonus">
                    <h3 :style="{marginTop:2+'px',marginBottom:10 +'px'}">当日所有收益 {{paramsData.bonus/100}}元</h3>
                    <!-- <div size="mini" style="color:#ccc">查看流水</div> -->
                    <el-button size="mini" @click="$router.push('/running')">查看流水</el-button>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="financeInfo">
              <el-row :gutter="10">
                <el-col :span="12">
                  <div class="balance">
                    <h3 :style="{marginTop:2+'px',marginBottom:10 +'px'}">管控客户数</h3>
                    <h3>2</h3>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="bonus">
                    <h3 :style="{marginTop:2+'px',marginBottom:10 +'px'}">分站数</h3>
                    <h3>3</h3>
                    <!-- <div size="mini" style="color:#ccc">查看流水</div> -->
                  </div>
                </el-col>
              </el-row>
            </div>
            <!-- <div class="classify">
              <div id="user"></div>
              <div id="merchant"></div>
              <div id="use"></div>
            </div>-->

            <el-row :gutter="10">
              <el-col :span="8">
                <div style="padding:10px;border: 1px solid #ccc;background:#fff;"><div id="user"  style="height:220px;width:100%;"></div></div>
              </el-col>
              <el-col :span="8">
                <div style="padding:10px;border: 1px solid #ccc;background:#fff;"><div id="merchant" style="height:220px;width:100%;"></div></div>
              </el-col>
              <el-col :span="8">
                <div style="padding:10px;border: 1px solid #ccc;background:#fff;"><div id="use" style="height:220px;width:100%;"></div></div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="8" :style="{padding:0}">
          <div class="right" id="right">
            <div id="chart" ></div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div>
      <div id="buttomChart" style="height:332px"></div>
    </div>
    <div>
      <div id="buttomTwoChart" style="height:332px"></div>
    </div>
  </div>
</template>

<script>
const token = sessionStorage.getItem("token");
import echarts from 'echarts' 
export default {
  data() {
    return {
      count: 0,
      paramsData: {
        totalMoney: 0, //账户余额
        bonus: 0, //奖金
        userCount: 0, //  客户量
        level0Count: 0, //  普通客户量
        level1Count: 0, //  vip量
        level2Count: 0, //  高级vip量
        smallCount: 0, //  商家类型 小
        minCount: 0, //  商家类型 中
        bigCount: 0, //商家类型 大
        never: 0, //  使用情况  从未
        has: 0, //使用情况  用过
        using: 0 //使用情况  正在用
      }
    }
  },
  mounted() {
    
    //发请求
     this.showPage()
    // echarts 饼图调用
    this.drawLine(); // 初始化
    this.drawLine2(); // 初始化
    this.drawLine3(); // 初始化
    // 右边折线图
    this.rightChant();
    // 底部折线图
    this.buttomChart();
    //最底下的折线图
    this.buttomTwoChart();
    
  },
  methods: {
    goEmbody(){
      this.$router.push({path:'/withdrawal'})
    },
    showPage() {
      var paramsData = this.paramsData
      // for(var key in paramsData){
      //   if(paramsData[key] === 0){
      //     delete paramsData[key]
      //   }
      // }

      let {totalMoney,bigCount,bonus,userCount,level0Count,level1Count,level2Count,smallCount,minCount,never,has,using} = paramsData 
      // this.$axios.get(`${process.env.API_HOST}webSite/statistics`, {
      this.axios.get('/webSite/statistics', {
        headers: {
          "Authorization": token,
          "domain": "taobao.tianyalei.com/xxxx",
          "Content-type": "application/x-www-form-urlencoded; charset=utf-8"
        },
        
      }).then(res => {
        console.log(res.data.data)
        this.paramsData = res.data.data
      })
    },
    // 第一个饼图
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("user"));

      // 绘制图表
      myChart.setOption({
        title: { text: "用户等级" },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "left",
          bottom: 0,
          data: ["注册用户", "vip用户", "转世用户 分站单独定价"]
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["30%", "60%"],
            center: ["60%", "40%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "15",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: this.paramsData.level0Count, name: "注册用户" },
              { value: this.paramsData.level1Count, name: "vip用户" },
              { value: this.paramsData.level2Count, name: "砖石用户 分站单独定价" }
            ]
          }
        ]
      });
    },

    // 第二个饼图
    drawLine2() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("merchant"));

      // 绘制图表
      myChart.setOption({
        title: { text: "商家类型" },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "left",
          bottom: 0,
          data: [
            "大商家 日均50单以上",
            "中商家 日均20-50单以",
            "小商家 日均小于20单"
          ]
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["30%", "60%"],
            center: ["60%", "40%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "15",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: this.paramsData.smallCount, name: "大商家 日均50单以上" },
              { value: this.paramsData.minCount, name: "中商家 日均20-50单以" },
              { value: this.paramsData.bigCount, name: "小商家 日均小于20单" }
            ]
          }
        ]
      });
    },

    // 第三个饼图
    drawLine3() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("use"));

      // 绘制图表
      myChart.setOption({
        title: { text: "使用情况" },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "left",
          bottom: 0,
          data: [
            "未使用过 从未下过单",
            "使用中 近7日下过单",
            "暂停使用 使用过,近7日未下单"
          ]
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["30%", "60%"],
            center: ["60%", "40%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "15",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: this.paramsData.never, name: "未使用过 从未下过单" },
              { value: this.paramsData.has, name: "使用中 近7日下过单" },
              { value: this.paramsData.using, name: "暂停使用 使用过,近7日未下单" }
            ]
          }
        ]
      });
    },

    // 右边折线图
    rightChant() {
      //  初始化实例
      let myChart = echarts.init(document.getElementById("chart"));
      // 绘制图表
      myChart.setOption({
        xAxis: {
          type: "category",
          data: [
            "未联系上",
            "已联系",
            "初步沟通",
            "深入沟通有意向",
            "确定合作",
            "已合作",
            "悔单",
            "放弃",
            "信息错误",
            "未联系"
          ]
        },
        yAxis: [
          {
            type: "value",
            
            min: 0,
            max: 1,
            interval: 0.2, //间隔
            minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
            axisLabel: {
              // formatter: '{value} 台'
            }
          }
        ],
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line"
          }
        ]
      });
    },

    //底部折线图
    buttomChart() {
      // 创建一个实例
      let myChart = echarts.init(
        document.getElementById("buttomChart")
      );

      // 绘制
      myChart.setOption({
        title: {
          text: "新增注册数",
          subtext: "近十五日数据    查看更多"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["新增注册"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "2019420",
            "2019421",
            "2019422",
            "2019423",
            "2019424",
            "2019425",
            "2019426",
            "2019427",
            "2019428",
            "2019429",
            "2019430"
          ]
        },
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 1,
            interval: 0.2, //间隔
            minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
            axisLabel: {
              // formatter: '{value} 台'
            }
          }
        ],
        series: [
          {
            name: "新增注册",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      });
    },

    //最底下的折线图
    buttomTwoChart() {
      // 创建一个实例
      let myChart = echarts.init(
        document.getElementById("buttomTwoChart")
      );

      // 绘制
      myChart.setOption({
        title: {
          text: "新增注册数",
          subtext: "近十五日数据    查看更多"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["新增注册"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "2019420",
            "2019421",
            "2019422",
            "2019423",
            "2019424",
            "2019425",
            "2019426",
            "2019427",
            "2019428",
            "2019429",
            "2019430"
          ]
        },
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 1,
            interval: 0.2, //间隔
            minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
            axisLabel: {
              // formatter: '{value} 台'
            }
          }
        ],
        series: [
          {
            name: "新增注册",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.pageTop {
  overflow: hidden;

  >div {
    float: left;
  }
}

.financeInfo {
  overflow: hidden;
  margin-bottom: 10px;

  .balance, .bonus {
    height: 64px;
    background: #fff;
    padding: 15px;
    text-align: center;

    >h3 {
      
      text-align: center;
    }

    .el-button {
      margin: 0 auto;
    }
  }

  .balance {
    text-align: center;
    border: 1px solid #ccc;
  }

  .bonus {
    // margin-left:10px;
    border: 1px solid #ccc;

    h3 {
      margin-top: 10px;
      margin-bottom: 15px;
    }

    .el-button {
      margin: 0 auto;
      font-size: 16px;
    }
  }
}

.count {
  height: 53px;
  padding-top: 15px;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid #ccc;

  >div {
    text-align: center;
    height: 18px;
  }

  
}

.classify {
  >div {
    height: 245px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  }

  div:nth-child(2) {
    margin-left: 15px;
  }

  div:nth-child(3) {
    margin-left: 15px;
  }
}

#chart {
  box-sizing: border-box;
  width: 100%;
  height: 454px;
  border: 1px solid #ccc;
  background: #fff;

}

#buttomChart {
  margin-top: 10px;
  border: 1px solid #ccc;
  background: #fff;
  padding: 15px;
}

.BottomTwp {
  margin-top: 20px;
  
}

#buttomTwoChart {
  border: 1px solid #ccc;
  margin-top: 10px;
  background: #fff;
  padding: 15px;
}
</style>
